<template>
    <div id="refund_container">
        <div class="input-group">
            <label>申请服务</label>
            <select v-model="type">
                <option value="0">请选择一种退换货服务</option>
                <option value="1">换货</option>
                <option value="2">退货退款</option>
                <option value="3">仅退款</option>
            </select>
        </div>
        <div class="input-group" v-show="type != 3">
            <label>商品数量</label>
            <input v-model="num" type="number">
        </div>
        <div class="input-group" v-show="type != 1">
            <label>退款金额</label>
            <input v-model="money" type="number">
        </div>
         <div class="input-group">
            <label>退换说明</label>
            <textarea v-model="reason" placeholder="最多200字" maxlength="200"></textarea>
        </div>
        <div class="c-btn highlight" :class="{disabled: !formFilled}"
            @click="submit">提交申请</div>
    </div>
</template>
<script>
import { Indicator, Toast } from 'mint-ui'
export default {
    name: 'Refund',
    mounted(){
        document.getElementById('refund_container').style.height = window.innerHeight + 'px'
    },
    data(){
        return{
            type: 1,
            num: '',
            money: '',
            reason: ''
        }
    },
    computed:{
        formFilled(){
            return (this.type == 1 && this.num && this.reason) ||
            (this.type == 2 && this.num && this.money && this.reason) ||
            (this.type == 3 && this.money && this.reason)
        }
    },
    methods:{
        async submit(){
            if(!this.formFilled) return
            Indicator.open()
            const {success, msg} = await this.$store.dispatch('order/refund', {
                orderId: this.$route.params.orderId,
                goodsId: this.$route.params.goodsId,
                type: this.type,
                reason: this.reason,
                num: this.num || 0
            })
            Indicator.close()
            if(success) this.$router.replace('/order/list?type=1')
            else Toast(msg)
        }
    }
}
</script>
<style lang="less" scoped>
#refund_container{
    padding: .4rem;
    background: #fff;
}
.input-group{
    width: 100%;
    min-height: .8rem;
    line-height: .8rem;
    margin-top: .4rem;
    background: #eee;
    padding: 0 .4rem;
    font-size: .35rem;
    label{
        margin-right: .4rem;
        color: #aaa;
    }
    select,input,textarea{
        font-size: .38rem;
        border: none;
        background: transparent;
        color: #5c5c5c;
    }
    select{
        width: 6.3rem;
        display: inline-block;
    }
    textarea{
        font-family: '微软雅黑';
        width: 100%;
        height: 2rem;
        resize: none;
    }
}
.c-btn{
    display: block;
    margin: 1.5rem auto;
}
</style>

